css

.container {
      margin: 15px 0;
      padding: 10px;
      background-color: #fff3cd;
      border-radius: 8px;
    }
    
    .flex-container {
      display: flex;
      width: 100%;
      height: 120px;
      background-color: white;
      border: 2px solid #ffc107;
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
    }
    
    .flex-item {
      background-color: #28A745;
      color: white;
      padding: 15px 20px;
      border-radius: 5px;
      margin-right: 10px;
      font-weight: bold;
    }
    
    .stretch { align-items: stretch; }/*子元素被 拉伸填滿容器高度*/
    .start { align-items: flex-start; }/*子元素 靠上對齊*/
    .end { align-items: flex-end; }/*子元素 靠下對齊*/
    .center { align-items: center; }/*子元素 垂直置中*/
    .baseline { align-items: baseline; }/*子元素的 文字底線（baseline）對齊*/

html

<div class="container">
 <h4>🏃 stretch（預設）- 拉伸填滿</h4>
 <div class="flex-container stretch">
   <div class="flex-item">A</div>
   <div class="flex-item">B</div>
   <div class="flex-item">C</div>
 </div>
</div>

<div class="container">
 <h4>⬆️ flex-start - 頂部對齊</h4>
 <div class="flex-container start">
   <div class="flex-item">A</div>
   <div class="flex-item">B</div>
   <div class="flex-item">C</div>
 </div>
</div>

<div class="container">
 <h4>⬇️ flex-end - 底部對齊</h4>
 <div class="flex-container end">
   <div class="flex-item">A</div>
   <div class="flex-item">B</div>
   <div class="flex-item">C</div>
 </div>
</div>

<div class="container">
 <h4>🎯 center - 垂直居中</h4>
 <div class="flex-container center">
   <div class="flex-item">A</div>
   <div class="flex-item">B</div>
   <div class="flex-item">C</div>
 </div>
</div>

<div class="container">
 <h4>📝 baseline - 基線對齊</h4>
 <div class="flex-container baseline">
   <div class="flex-item" style="font-size: 12px;">小字</div>
   <div class="flex-item" style="font-size: 16px;">中字</div>
   <div class="flex-item" style="font-size: 24px;">大字</div>
 </div>
</div>